<template>
  <div :class="[
    'wxc-cell',
    hasTopBorder && 'cell-top-border',
    hasBottomBorder && 'cell-bottom-border',
    hasMargin && 'cell-margin',
    hasVerticalIndent && 'cell-indent',
    desc && 'has-desc'
  ]"
       :style="cellStyle"
       :accessible="autoAccessible"
       :aria-label="`${label},${title},${desc}`"
       @click="cellClicked">
    <slot name="label">
      <div v-if="label">
        <text class="cell-label-text"
              :style="{width: labelWidth + 'px'}">{{label}}</text>
      </div>
    </slot>
    <slot name="title">
      <div class="cell-title"
           v-if="showTitle">
        <text class="cell-content"
              :style="titleStyle">{{title}}</text>
        <text class="cell-desc-text"
              :style="titleStyle"
              v-if="desc">{{desc}}</text>
        <text class="cell-placeholder"
              :style="titleStyle"
              v-if="!title && !desc">{{placeholder}}</text>
      </div>
    </slot>
    <slot name="value"></slot>
    <slot></slot>
    <text class="extra-content-text"
          v-if="extraContent">{{extraContent}}</text>
    <image :src="arrowIcon"
           class="cell-arrow-icon"
           :aria-hidden="true"
           v-if="hasArrow"
           @click="arrowClicked"></image>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    extraContent: {
      type: String,
      default: ''
    },
    desc: {
      type: String,
      default: ''
    },
    hasTopBorder: {
      type: Boolean,
      default: false
    },
    hasMargin: {
      type: Boolean,
      default: false
    },
    hasBottomBorder: {
      type: Boolean,
      default: true
    },
    hasArrow: {
      type: Boolean,
      default: false
    },
    arrowIcon: {
      type: String,
      default: 'bmlocal://assets/icon_right_gray.png'
    },
    hasVerticalIndent: {
      type: Boolean,
      default: true
    },
    cellStyle: {
      type: Object,
      default: () => ({})
    },
    autoAccessible: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: [Number, String],
      default: 188
    },
    titleAlign: {
      type: String,
      default: 'right'
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    // titleWrapStyle() {
    //   const alignMap = {
    //     'right': 'flex-end',
    //     'center': 'center',
    //     'left': 'flex-start',
    //   }
    //   return { alignItems: alignMap[this.titleAlign] || 'flex-end' }
    // },
    titleStyle() {
      return { textAlign: this.titleAlign }
    }
  },
  methods: {
    cellClicked(e) {
      this.$emit('cellClicked', { e })
    },
    arrowClicked(e) {
      this.$emit('cellClicked', { e })
    }
  }
};
</script>

<style scoped>
.wxc-cell {
  /*height: 100px;*/
  flex-direction: row;
  align-items: center;
  padding-left: 24px;
  padding-right: 24px;
  background-color: #ffffff;
}
.cell-margin {
  margin-bottom: 24px;
}
.cell-title {
  flex: 1;
}
.cell-indent {
  padding-bottom: 20px;
  padding-top: 20px;
}
.has-desc {
  padding-bottom: 18px;
  padding-top: 18px;
}
.cell-top-border {
  border-top-color: #e9ecef;
  border-top-width: 1px;
}
.cell-bottom-border {
  border-bottom-color: #e9ecef;
  border-bottom-width: 1px;
}
.cell-label-text {
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 30px;
  color: #666666;
  width: 188px;
  margin-right: 10px;
}
.cell-arrow-icon {
  width: 46px;
  height: 46px;
  padding: 10px;
}
.cell-content {
  color: #333333;
  font-size: 30px;
  line-height: 40px;
}
.cell-desc-text {
  color: #999999;
  font-size: 24px;
  line-height: 30px;
  margin-top: 4px;
  margin-right: 30px;
}
.extra-content-text {
  font-size: 28px;
  color: #999999;
  margin-right: 4px;
}
.cell-placeholder {
  color: #999;
  font-size: 30px;
}
</style>
